<template>
  <!-- 2. "任务广场"页面 -->
  <div class="tasksquare">
    <!-- 2.1 左侧任务广场主要内容 -->
    <div class="left-container">
      <square-screen @updateQueryParams="handleUpdateQueryParams" />
      <square-lists
        :queryParams="queryParams"
        @update:page="updatePage"
        @updateQueryParams="handleUpdateQueryParams"
      />
    </div>
    <!-- 2.2 右侧通知 -->
    <right-container />
  </div>
  <!-- 返回顶部 -->
  <el-backtop :right="30" :bottom="100" />
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue'
import squareScreen from './c-cpns/square-screen.vue'
import squareLists from './c-cpns/square-lists.vue'
import rightContainer from './c-cpns/right-container.vue'
import { queryTasksWithConditions } from '@/service/taskdetail/taskdetail.ts'

const tasks = ref({ data: { records: [], total: 0 } })
// 默认查询参数
const queryParams = ref({
  page: 1,
  pageSize: 10
})

const fetchTasks = async (page: number = queryParams.value.page) => {
  try {
    queryParams.value.page = page
    const response = await queryTasksWithConditions(queryParams.value)
    tasks.value.data = response.data.data
  } catch (error) {
    console.error('获取任务列表失败', error)
  }
}
function updatePage(newPage: any) {
  queryParams.value.page = newPage
}

function handleUpdateQueryParams(newParams: any) {
  Object.assign(queryParams.value, newParams)
  queryParams.value.page = 1
  fetchTasks()
}
let intervalId: number | undefined
onMounted(() => {
  fetchTasks() // 初次加载和参数变化时重新获取数据
  document.title = '任务广场 - 实力接单'
})
onUnmounted(() => {
  if (intervalId) {
    clearInterval(intervalId) // 组件卸载时清除定时器
  }
})
</script>

<style lang="less" scoped>
.tasksquare {
  width: 1100px;
  margin: 0 auto;
  display: flex;
  background-color: #f0f2f5;
  padding: 20px;
}
.el-backtop {
  z-index: 1000;
}
</style>
